// resolve 用来拼接绝对路径的方法
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

const htmlWebpackPlugin = new HtmlWebpackPlugin({
    template: './src/index.html',
    minify: {
        collapseWhitespace: true,
        removeComments: true,
    }
});
const myEnv = 'production';
// 对 node 环境的配置
process.env.NODE_ENV = myEnv;
// webpack 配置
const webPackConfig = {
    // 入口起点，
    // entry: './src/js/index.js',  // 单入口--常用于单页面
    entry:{
        // 多入口，有一个入口，最终输出就有一个bundle  --- 常用于多页面
        main:'./src/js/index.js',
        test:'./src/js/test.js'
    },
    output: {
        // 输出文件名 [name] 表示取文件名 ，这里的文件名是指的是 entry 多入口 的key值
        filename: 'js/[name].build.[contenthash:10].js',
        // __dirname 是nodejs的变量，代表当前文件的目录的绝对路径,相当于【./】
        // resolve(__dirname,'build') 方法就相当于将这两个目录拼接起来
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                // oneOf 表示一下loader只会匹配一个
                // 注意： 不能有两个配置处理同一种类型文件，当必须有多个配置的话可以将其它多的配置提到上面一层级
                oneOf: [

                ]
            }
        ]
    },
    plugins: [
        htmlWebpackPlugin, 
    ],
    /*
        optimization:{
            splitChunks:{
                chunks:'all'
            }
        },
        1.可以将 node_modules 中代码单独打包成一个chunk最终输出（比如引入了一个jQuery，它会将jQuery单独打包成一个js文件）
        2.自动分析多入口chunk中，有没有公共的文件。如果有会打包成一个单独的一个chunk
    */
    optimization:{
        splitChunks:{
            chunks:'all'
        }
    },
    // mode: 'development', // 开发模式
    mode: 'production', // 生产模式  会自动压缩js代码
}

module.exports = webPackConfig

// npm i postcss-loader

/**
 * tree shaking 树摇  去除无用的代码
 *  前提    
 *          1.必须使用es6模块化 
 *          2.开启production环境
 *  packjson.json 配置中
 *      【"sideEffects": false】 配置表示所有代码都没有副作用，都可以进行 tree shaking，如果这样配置了，会将import入的css给删掉，如果不想出现这样的话可以配置为  【"sideEffects": ["*.css","*.less"]】
 */